<template>
  <div class="search" v-if="goods">
    <div class="search-input-wrap">
      <form action="/">
        <van-search
          v-model="keyword"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
          shape="round"
        />
      </form>
    </div>
    <div class="hot-list" v-if="fale">
      <h4>热门搜索</h4>
      <ul>
        <li v-for="(l, i) in hot" :key="i" @click="guoclick(l)">{{ l }}</li>
      </ul>
    </div>
    <van-cell-group v-else>
      <van-cell
        v-for="(item, lndex) in searchList"
        :key="lndex"
        :title="item.name"
      ></van-cell>
      <div class="search-result-wrap">
        <ul class="search-result-list">
          <li
            class="item"
            v-for="(j, k) in goods.list"
            :key="k"
            @click="item"
          >
            <div class="sku-item-wide-wrap">
              <img :src="j.images" alt="" class="item-image" />
              <div class="item-content">
                <h5 class="item-content">{{ j.skuName }}</h5>
                <p class="sub-title">{{ j.skuSubTitle }}</p>
                <ul class="item-color-list-wrap"></ul>
                <p class="item-price-wrap">
                  <span class="price">
                    <i>￥</i>
                    <span>{{ j.price }}</span>
                  </span>
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </van-cell-group>
  </div>
</template>


<script>
export default {
  data() {
    return {
      keyword: "",
      hot: {},
      fale: true,
      searchList: [],
      // goods: [],
    };
  },
  methods: {
    onSearch(value) {
      console.log(value);

      this.fale = false;
    },
    onCancel() {
      this.keywordUser([]);
      this.$router.go(-1);
    },
    item() {
      this.$router.push({ name: "item", params: { spuId: 1001628 } });
    },
    guoclick(w) {
      this.fale = false;
      this.$ajax
        .goods({
          page: 1,
          pageSize: 20,
          keyword: w,
        })
        .then((res) => {
          this.keywordUser(res.data);
          console.log(this.goods);
        });
    },
  },
  mounted() {
    this.$ajax.hot({}).then((res) => {
      this.hot = res.hot;
    });
  },
};
</script>


<style lang="scss" scoped>
.search {
  .hot-list {
    padding: 0 10px;
    h4 {
      font-size: 15px;
      line-height: 18px;
      color: #8e8e8e;
      font-weight: 400;
      padding: 25px 0 15.65px 7.292px;
    }
    li {
      position: relative;
      font-size: 13px;
      font-weight: 700;
      height: 30px;
      line-height: 30px;
      display: inline-block;
      padding: 0 16px 0;
      opacity: 1;
      transition: opacity 0.15s ease-out;
      text-align: center;
      border-radius: 16px;
      margin: 0 4.16px 8.33px 0;
    }
    li:before {
      content: "";
      position: absolute;
      top: 0;
      bottom: -42.85714%;
      left: 0;
      right: -42.85714%;
      border-radius: 4px;
      transform: scale(0.7);
      transform-origin: 0 0;
    }
    li:nth-child(1) {
      color: #cd3f36;
      background-color: #ffe7e5;
      border: 1px solid #f1948c;
    }
    li:nth-child(6) {
      color: #cd3f36;
      background-color: #ffe7e5;
      border: 1px solid #f1948c;
    }
    li:nth-child(2) {
      color: #e78612;
      background-color: #fff7e4;
      border: 1px solid #ffca6d;
    }
    li:nth-child(3) {
      color: #e78612;
      background-color: #fff7e4;
      border: 1px solid #ffca6d;
    }
    li:nth-child(4) {
      color: #e78612;
      background-color: #fff7e4;
      border: 1px solid #ffca6d;
    }
    li:nth-child(5) {
      color: #e78612;
      background-color: #fff7e4;
      border: 1px solid #ffca6d;
    }
  }
  .search-result-wrap {
    .search-result-list {
      .item {
        position: relative;
      }
    }
  }
}
.sku-item-wide-wrap {
  position: relative;
  width: 100%;
  padding: 12.5px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  background-color: #fff;
  box-sizing: border-box;
  .item-image {
    width: 126.04px;
    height: 126.04px;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-right: 32.29px;
  }
  .item-content {
    position: relative;
    overflow: hidden;
    .title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-weight: 700;
      font-size: 15.6px;
      line-height: 15.6px;
      color: #333;
    }
    .sub-title {
      width: 120%;
      color: #7f7f7f;
      font-size: 12.5px;
      transform: scale(0.83333);
      transform-origin: 0 100%;
      margin-top: 4.167px;
      line-height: 1.2;
      white-space: nowrap;
      overflow-x: hidden;
      text-overflow: ellipsis;
    }
    .item-color-list-wrap {
      display: block;
      margin-top: 8.33px;
    }
    .item-price-wrap {
      margin-top: 16.67px;
    }
  }
  .price {
    i {
      font-style: normal;
      font-size: 10.42px;
      display: inline-block;
      transform: scale(0.83333);
      transform-origin: left bottom;
      margin-right: 1px;
    }
    span {
      font-size: 13.6px;
    }
  }
}
.item-price-wrap {
  color: #d44d44;
  display: inline-block;
  white-space: nowrap;
  font-weight: 700;
  line-height: 1;
}
</style>